@import (reference) "./common.less";

.arrow {
    animation-duration: 0.3s;
    animation-delay: 0.2s;
    opacity: 0;
    animation-fill-mode: forwards;

    &.right {
        animation-name: appear-right;
    }

    &.left {
        animation-name: appear-left;
    }

    &.down {
        animation-name: appear-down;
    }

    &.up {
        animation-name: appear-up;
    }
}

@keyframes appear-down {
    from {
        transform: translateY(-4px);
        opacity: 0;
    }
    to {
        transform: translateY(0px);
        opacity: 1;
    }
}
@keyframes appear-up {
    from {
        transform: translateY(4px);
        opacity: 0;
    }
    to {
        transform: translateY(0px);
        opacity: 1;
    }
}
@keyframes appear-left {
    from {
        transform: translateX(4px);
        opacity: 0;
    }
    to {
        transform: translateX(0px);
        opacity: 1;
    }
}
@keyframes appear-right {
    from {
        transform: translateX(-4px);
        opacity: 0;
    }
    to {
        transform: translateX(0px);
        opacity: 1;
    }
}
